<template>
	<div id="footer" v-if="$route.meta.footShow">
		<ul class="flex">
			<li>
				<router-link class="mj" to='/square' exact>
					<i class="iconfont square icon-tubiao-2"></i>
					<div>拼券广场</div>
				</router-link>
			</li>
			<li>
				<router-link class="mj" to='/active'>
					<i class="iconfont active icon-tubiao-"></i>
					<div>营销活动</div>
				</router-link>
			</li>
			<li>
				<router-link class="mj" to='/circle'>
					<i class="iconfont lang icon-tubiao-3"></i>
					<div> 浪客圈</div>
				</router-link>
			</li>
			<li>
				<router-link class="mj" to='/Coupon'>
					<i class="iconfont  quan icon-gezitubiao-"></i>
					<div> 发起拼券</div>
				</router-link>
			</li>
			<li>
				<router-link class="mj" to='/my'>
					<i class="iconfont my icon-tubiao-1"></i>
					<div> 我的</div>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'Nav',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				colors: "#000"
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {

		},
		mounted() {

		}
	}
</script>

<style scoped>
	#footer {
		width: 100%;
		height: 2.1304rem;
		max-width: 640px;
		position: fixed;
		bottom: 0;
		border-top: solid 1px #E7E7E7;
		z-index: 1;
		background-color: white;
		margin: 0 auto;
	}	
	#footer ul>li {
		width: calc(100%/3);
		/*padding-top: 0.20rem;*/
		text-align: center;
		font-size: 0.4782rem;
	}
	#footer a {
		display: block;
		height: 100%;
		text-align: center;
	}	
	.set {
		font-size: 1.2rem;
	}
	.mj.router-link-active {
		color:#007AFF;
	}
	.mj{
		padding-top: 0.2rem;
	}
	.mj>i{
		font-size: 1rem;
	}
	.el-message {
    min-width: 4rem;
    top: 40% !important;
}
</style>